<template>
  <header class="header">
    <h1>todos</h1>
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="allDone"
    />
    <label for="toggle-all"></label>
    <input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model="content" @keyup.enter="handleSubmit" />
  </header>
</template>

<script setup lang="ts">

import todosStore, { Todo } from '@/stores/todos'
import { computed, ref } from 'vue-demi'

const todos = todosStore()

const allDone = computed({
  get: () => todos.isAllDone,
  set: (bl) => todos.changeAllDone(bl)
})

const content = ref('')
const handleSubmit = () => {
  // 非空判断
  if (!content.value) return alert('请输入内容~')
  // 添加
  const todo:Todo = { id: Date.now(), content: content.value, completed: false }
  todos.addTodo(todo)
  // 添加后清空
  content.value = ''
}
</script>
